<style scoped >
    @import "../styles/user.css";
    .page-user {background: #f4f4f4}
</style>

<template>
    <div id="page-user" class="page-wrap page-user">
        <div class="m-user">

            <header-component keep-alive :page-name="pageName"></header-component>
            <nav-component keep-alive ></nav-component>

            <div class="cdk-container">
                <a href="javascript:;" data-href="?c=userDetail" v-link="{path:'/userDetail'}" style="width: 100%;height: 100px">
                    <div class="per-upper">
                        <div class="per-headImg"><img :src="user.img"></div>
                        <!--<div class="per-headImg"><img src="{{#if img}}{{img}}{{else}}images/90.jpeg{{/if}}"/></div>-->
                        <p class="per-nickName nowrap">{{user.username}}</p>
                        <!--<p class="per-nickName nowrap">{{#if username}}{{username}}{{else}}&nbsp;{{/if}}</p>-->
                        <p class="per-userId">ID:{{user.id}}</p>

                        <!--<button data-href="?c=mall" class="per-btn per-btnPos_3">积分</button>-->
                        <!--<button data-href="?c=recharge" class="per-btn per-btnPos_1" v-link="{path:'/charge'}">充值</button>-->

                        <button data-href="?c=recharge" class="per-btn per-btnPos_1" @click.prevent="tixian()">提现</button>
                        <div  style="position: absolute;top: 50%;transform: translateY(-50%);right: 10px;"><b class="per-ico-next" style="border-color: #fff;"></b></div>
                    </div>
                </a>
                <div class="per-sign-footer">
                    <ul>
                        <li>
                            <a href="javascript:;" data-href="?c=mall" v-link="{path:'/mall'}">
                                <span class="per-span_1">{{user.surplus_points}}</span>
                                <span class="per-span_2" style="color:#aeaeae">积分</span>
                            </a>
                        </li>
                        <li class="per-gradientBorder">
                            <span class="per-span_1">{{user.money}}</span>
                            <span class="per-span_2" style="color:#aeaeae">余额</span>
                        </li>

                        <li>
                            <a href="javascript:;" data-href="?c=coupon" v-link="{path:'/coupon'}">
                                <span class="per-span_1">{{user.coupon_num}}<i class="ico-dot" v-show="user.coupon_allowed_num!=0"></i></span>
                                <span class="per-span_2" style="color:#aeaeae">优惠券</span>
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="per-user-bar">
                    <a href="javascript:;" class="per-w-bar" data-href="?c=buyRecord" v-link="{path:'/buyRecord'}"><i class="ifont">&#xe64b;</i><span style="vertical-align: middle;">拼宝记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span> </a>
                    <a href="javascript:;" class="per-w-bar" data-href="?c=winRecord" v-link="{path:'/winRecord'}"><i class="ifont">&#xe64d;</i><span>中奖记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>
                    <a href="javascript:;" class="per-w-bar" data-href="?c=grouprecord" v-link="{path:'/groupRecord'}"><i class="ifont">&#xe64c;</i><span>拼团记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>
                    <a href="javascript:;" class="per-w-bar" data-href="?c=chargeRecord" v-link="{path:'/chargeRecord'}"><i class="ifont">&#xe64e;</i><span>消费记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>
                    <a href="javascript:;" class="per-w-bar" data-href="?c=share&amp;uid={{id}}" v-link="{path:'/myShareOrder',query:{uid:user.id}}"><i class="ifont">&#xe645;</i><span>晒单记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>
                    <a :href="cartLink" class="per-w-bar "><i class="ifont">&#xe60b;</i><span>卡券记录</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>

                    <a href="javascript:;" class="per-w-bar mt10" data-href="?c=address" v-link="{path:'/address'}"><i class="ifont">&#xe64a;</i><span>收货地址</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>

                    <a href="javascript:;" class="per-w-bar" data-href="?c=serviceCenter" v-link="{path:'/serviceCenter'}"><i class="ifont">&#xe643;</i><span>服务中心</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>

                     <a href="javascript:;" class="per-w-bar m-call" @click="getServe"><i class="ifont">&#xe644;</i><span>联系客服</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>
                    <!--<a href="javascript:;" class="per-w-bar" data-href="?c=resetPassword"><i class="ifont">&#xe647;</i><span>修改密码</span><span class="per-w-bar-ext"><b class="per-ico-next"></b></span></a>-->
                    <a href="javascript:;" @click="logOut" class="per-w-bar per-m-user-bar-margin per-logout" id="logOut">退出登录</a>
                </div>
            </div>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :delay="delay" :msg="msg">
        <a href="javascript:;" @click="sure">确定</a>
        <a href="javascript:;" @click="cancle">取消</a>
    </pop>
</template>

<script>
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    import pop from '../components/pop'
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    export default{
        data(){
            return{
                statusPop:false,
                statusToast:false,
                delay:2000,
                msg:'',
                user:{},
                pageName:'用户中心',
                cartLink:Config.apiDomain+'/Card/show_page?token='+User.token
            }
        },
        created(){
            this.$dispatch('isLoading',true)
        },
         async ready(){
            if(!User.isLogin){
                this.$router.replace('/login');
                return ;
            }
            await this.getUser();

            this.$dispatch('isLoading',false)
        },
        components:{

            headerComponent,
            navComponent,
            pop

        },

        methods:{
            async tixian(){
                location.href = Config.apiDomain + '/Auto/getMoneyCash?token='+User.token


//                if(!!res.status){
//                    this.statusToast = true;
//                    this.msg = res.msg
//                }
//                else {
//                    this.statusToast = true;
//                    this.msg = '遇到错误,稍后再试'
//                }
            },
            getServe(){

                this.statusToast = true;

                this.msg = '请直接在公众号回复'

            },
            async getUser(){
                let res=await User.getUser();

                if(res.status==200){
                    this.user=Object.assign({},this.user,res.data.item[0])
                }

                return res;
            },
            logOut(){
                this.statusPop=true;
                this.msg='是否退出登录？'
            },
            sure(){
                this.statusPop=false;
                this.msg='';
                User.removeUser();

                this.$router.go({path:'/login'});
            },
            cancle(){
                this.statusPop=false;
            }
        }
    }
</script>
